<template>
  <div>
    <div class="player_content" :style="lyricStyle">
      <Scroll :disable-bar="disableBar" :height="height" disable-wheel @moveStart="isDarg = true" @moveEnd="isDarg = false" ref="scroll">
        <ul>
          <li v-for="(item, index) in lyricArray" :key="index" :class="[index == lyricIndex ? 'player-action-light' : '', middle ? 'player-action-middle' : '']">
            {{ item[1] }}
          </li>
        </ul>
      </Scroll>
    </div>
  </div>
</template>

<script>
import Scroll from '../components/common/scroll/scroll'
import { parseLyric } from '../utils/parse-lyric'
import { forcible } from '../mixin/comm/forcible-refresh'
export default {
  name: 'Lyric',
  components: { Scroll },
  props: {
    disableBar: {
      type: Boolean,
      default: false
    },
    lyric: {
      type: String,
      default() {
        return ''
      }
    },
    height: {
      type: String,
      default: ''
    },
    currentTime: {
      type: Number,
      default: 0
    },
    /** 列表还是一行
     * 列表当前歌词在中间时才滚动
     * true是列表形式，字体较小
     */
    middle: {
      type: Boolean,
      default: false
    },
    /** 在middle为true时，即列表形式歌单时有效，
     * 作用：设置第几行歌词滚动
     * 同时动态计算此时歌词列表高度
     */
    scrollNum: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      isDarg: false, // 是否在拖动歌词进度条,true禁用歌词srollto
      lyricArray: [], // 转化后歌词数组
      lyricIndex: -1, // 活跃的歌词行数
      midIndex: 0,
      length: 0
    }
  },
  mixins: [forcible],
  computed: {
    lyricStyle() {
      return {
        height: this.middle ? `${(this.scrollNum * 2 + 1) * 40}px` : this.height
      }
    }
  },
  methods: {
    refresh() {
      this.$refs.scroll.refresh()
    }
  },
  watch: {
    lyric() {
      this.lyricIndex = -1
      this.midIndex = 0
      this.$refs.scroll.scrollTo(0, 0, true)
      /** 格式化歌词 */
      this.lyricArray = parseLyric(this.lyric)
      /** 歌词改变，歌词列表刷新后重新计算刷新滚动条 */
      this.$nextTick(() => {
        this.refresh()
        /** 歌曲切换歌词滚动到最顶部 */
        this.$refs.scroll.scrollTo(0, 0)
      })
    },
    /** 监听歌曲播放时间，滚动歌词 */
    currentTime(currentTime) {
      /** 歌词对应时间判断 */
      for (let i = 0; i < this.lyricArray.length; i++) {
        const line = this.lyricArray[i]
        const nextLine = this.lyricArray[i + 1]
        /** 如果歌曲currentTime大于当前行歌曲时间，并且，下一行不为空或者当前currentTime小于下一行时间 */
        if (currentTime >= line[0] && (!nextLine || currentTime < nextLine[0])) {
          this.lyricIndex = i
          /** 如果歌词展示形式为列表，需要活跃歌词在中间时才滚动 */
          if (this.middle) {
            /** list形式时，活跃歌词不到中间不滚动 */
            if (this.lyricIndex < this.scrollNum || this.lyricIndex > this.lyricArray.length - this.scrollNum) {
              return
            }

            /** 拖动进度条小球时不能自动滚动 */
            if (!this.isDarg) {
              this.$refs.scroll.scrollTo(-40 * (this.lyricIndex - this.scrollNum), 2, false)
            }
          } else {
            this.$refs.scroll.scrollTo(-40 * this.lyricIndex, 0, false)
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.player_content {
  ul {
    list-style: none;
    li {
      font-size: 28px;
      color: #fff;
      height: 40px;
    }
    .player-action-light {
      font-size: 28px;
      color: var(--primary);
      text-align: center;
    }
    /* list 形式时middle为true--改变字号 */
    .player-action-middle {
      font-size: 16px;
      text-align: left;
    }
  }
}
</style>
